<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .form-item {
            margin-top: 10px;
        }

        .tips {
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div class="register-bar">
        <p class="form-item">
            <label for="">用户名:</label>
            <input class="user" type="text">
            <span class="user-tips tips"></span>
        </p>
        <p class="form-item">
            <label for="">密&emsp;码:</label>
            <input class="pwd" type="text">
            <span class="pwd-tips tips"></span>
        </p>
        <p class="form-item">
            <label for="">确&emsp;认:</label>
            <input class="repwd" type="text">
            <span class="repwd-tips tips"></span>
        </p>
        <p class="form-item">
            <label for="">验证码:</label>
            <input class="code" type="text">
            <span class="createCode">jq0b</span>
            <span class="code-tips tips"></span>
        </p>
        <p class="form-item">
            <button class="btn">注册</button>
        </p>
    </div>
</body>
<script>
    // 需求: 点击注册按钮,对输入框中的用户名进行校验 

    // 用户名要求
    // 由 数字 大小写字母 _ 组成, 6-12位, 且不能以数字开头

    // 按照从易到难的顺序写:
    // (1) 6-12位 (字符串长度6-12)
    // (2) 不能以数字开头 (以非数字开头)
    // (3) 由 数字 大小写字母 _ 组成 => 每一个字符都是都是数字/大小写字母/_(合法字符) ,除此三者之外的字符(非法字符)
    //      判断每一个字符是否都是合法的?

    // 分析: 判断组成 =>  判断每一个字符是否都是合法的?  假设法: 假设都是合法的,找一个非法的即可推翻假设
    // 合法范围         ASCII
    // 数字            48 - 57         charCode>=48 && charCode <= 57
    // 大写字符        65 - 90         charCode>=65 && charCode <= 90
    // 小写字符        97 - 122        charCode>=97 && charCode <= 122
    // 下划线           95             charCode == 95

    // 合法条件
    // charCode>=48 && charCode <= 57 ||  charCode>=65 && charCode <= 90 || charCode>=97 && charCode <= 122 || charCode == 95

    // 非法:
    // !(charCode>=48 && charCode <= 57 ||  charCode>=65 && charCode <= 90 || charCode>=97 && charCode <= 122 || charCode == 95)


    // 创建一个数组包含所有的合法字符 数字 大小写字母 _
    // var normalList = ["0","1","2","3","4","a","z","A","Z","_"];  // 手搓(一个一个敲 => 麻烦  => 字符对应的编码范围已经)


    // 对应编码范围创建字符放到数组中
    var numList = [];
    for (var i = 48; i <= 57; i++) {
        var char = String.fromCharCode(i);
        numList.push(char);
    }
    console.log(numList);

    var bigList = [];
    for (var i = 65; i <= 90; i++) {
        var char = String.fromCharCode(i);
        bigList.push(char);
    }
    console.log(bigList);

    var smallList = [];
    for (var i = 97; i <= 122; i++) {
        var char = String.fromCharCode(i);
        smallList.push(char);
    }
    console.log(smallList);

    var speList = ["_"]; //允许使用的特殊字符
    var normalList = numList.concat(bigList,smallList,speList);
    console.log(normalList);













    // (1) 对应class名获取元素 document.getElementsByClassName()  => 方法返回的是包含给定class名的元素的集合(数组)  存在就返回集合(数组),不存在[]

    // var result = document.getElementsByClassName("user");
    // console.log(result); // 包含给定class名的元素的集合(数组)
    // console.log(result[0]); // 取出获取的元素

    // 单元素取值(确定页面中的元素只有一个 1. 先对应class名获取元素 => 数组  2. 取出该元素)
    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user-tips")[0];
    var btn = document.getElementsByClassName("btn")[0];
    console.log(userInp, userTips, btn);

    // (2) 绑定点击事件
    btn.onclick = function () {

        // 点击取值
        var user = userInp.value;
        console.log(user);  // 字符串类型

        var len = user.length;

        // 校验长度
        if (len >= 6 && len <= 12) {
            console.log("len Ok");

            // 校验开头(第一个字符)  =>  不能以数字开头 (以非数字开头)
            // (1)  直接验证数字: firstChar >= 0 && firstChar <= 9   => 条件取反 => 非数字
            // (2)  通过字符编码校验数字: firstCharCode >= 48 && firstCharCode <= 57   => 条件取反 => 非数字
            // (3)  通过isNaN() 校验, 是非数字返回true  数字返回false

            // 方法1:
            // var firstChar = user.charAt(0);

            // if(!(firstChar >= 0 && firstChar <= 9)){
            //     userTips.innerText = "√";
            //     userTips.style.color = "green";
            // }else{
            //     userTips.innerText = "用户名不能以数字开头!";
            //     userTips.style.color = "red";
            // }

            // 方法2: 
            // var firstCharCode = user.charCodeAt(0);

            // if(!(firstChar >= 48 && firstChar <= 57)){
            //     userTips.innerText = "√";
            //     userTips.style.color = "green";
            // }else{
            //     userTips.innerText = "用户名不能以数字开头!";
            //     userTips.style.color = "red";
            // }

            // 方法3:  isNaN

            var firstChar = user.charAt(0);
            if (isNaN(firstChar)) {
                console.log("开头 ok!");

                // 校验组成 =>  判断每一个字符是否都是合法的?     假设法: 假设都是合法的,找一个非法的即可推翻假设

                /* var flag = true; // 假设全都合法
                for (var i = 0; i < user.length; i++) {
                    var charCode = user.charCodeAt(i); // 对应下标的字符的编码
                    // 通过字符编码找非法字符
                    if(!(charCode>=48 && charCode <= 57 ||  charCode>=65 && charCode <= 90 || charCode>=97 && charCode <= 122 || charCode == 95)){
                        flag = false;
                        break;
                    }

                    
                }*/

                var flag = true; // 假设全都合法
                for (var i = 0; i < user.length; i++) {
                    var char = user.charAt(i); // 对应下标的字符
                    // 字符在normalList中存在 => 合法   不存在 => 非法
                    if(!normalList.includes(char)){
                        flag = false;
                        break;
                    }
                }

                if (flag) {
                    userTips.innerText = "√";
                    userTips.style.color = "green";
                } else {
                    userTips.innerText = "用户名由数字 大小写字母 下划线组成!";
                    userTips.style.color = "red";
                }

            } else {
                userTips.innerText = "用户名不能以数字开头!";
                userTips.style.color = "red";
            }



        } else {
            userTips.innerText = "用户名需要在6-12位之间!";
            userTips.style.color = "red";
        }



    }







</script>

</html>